<script>
	import charging from "@/components/common/charging.vue"
	import daojishi from "@/components/common/u-count-down.vue"
	import lookatvue from "@/components/common/lookat.vue"
	import lookvue from "@/components/common/look.vue"
	
	
	export default {
		components: {
			charging,daojishi,lookatvue,lookvue
		},
		data() {
			return {
				item:{},
				wenhao_flag:false,
				
				chargingShow: false,
				statusText: {
					1: "正常",
					2: "故障",
					3: "已预约",
					4: "停用",
				},
				orderData: [],
				caozuo:false,
				
				tabIndex: 0,
				page: 1,
				menu_type: 1 ,//1已预约 2充电中 3待支付 4待评价 5已完成
				
			}
		},
		computed: {
			basicData() {
				return this.$store.state.basicData
			}
		},
		onLoad() {
			this.getOrder()
		},
		onShow(){
			this.getOrder()
		},
		methods: {
			wenhao(){
				this.wenhao_flag=true
			},
			caozuo_action(){
				this.caozuo = true
			},
			update(e){
				var that = this
				setTimeout(function(){
					that.getOrder()
				},1000)
				that.menu_type=3
				
			},
			lookat(image,index){
				var arr = image.map_image?image.map_image.split('|') : []
				uni.previewImage({
					current:index,
					urls:arr
				})
			},
			openLocation(item) {
				if(item.type==1){
					uni.openLocation({
						latitude: Number(item.device.lat),
						longitude: Number(item.device.lng)
					})
				}else{
					uni.openLocation({
						latitude: Number(item.park.lat),
						longitude: Number(item.park.lng)
					})
				}
				
			},
			async getEvaluateInfo(item) {
				try{
					const res = await this.http("post", "/api/order/evaluate_info", {
						order_id: item.id
					})
					uni.showModal({
						title: "已评"+res.data.score + "星",
						content: "评论内容:"+res.data.comment,
						showCancel:false,
						confirmText:"关闭"
					})
				}catch{
					this.toast("获取评论失败")
				}
				
			},
			async getOrder(init) {
				if (init) {
					this.page = 1
				}
				this.orderData = [];
				uni.showLoading({
					title: "正在加载"
				})
				const res = await this.http("post", "/api/order/my_order", {
					member_id: uni.getStorageSync("id"),
					page: this.page,
					menu_type: this.menu_type
				})
				uni.hideLoading()
				this.orderData = res.data
			},
			async pay(item){
				var id = item.id
				var that = this
				const res = await this.http("post", "/api/order/topay_order", {
					id: id,
				})
				uni.showToast({
					title:'操作成功'
				})
				setTimeout(function(){
					that.getOrder()
					uni.hideLoading()
				},1000)
				that.menu_type=3
			},
			async charging(item){
				var id = item.id
				var that = this
				const res = await this.http("post", "/api/order/charging_order", {
					id: id,
				})
				uni.showToast({
					title:'操作成功'
				})
				setTimeout(function(){
					that.getOrder()
					uni.hideLoading()
				},1000)
				that.menu_type=2
				
			},
			async amount_pay(item){
				var id = item.id
				var that = this
				const re = await that.http("post", "/api/order/info3", {
					id: id
				})
				if(re.data){
					console.log(re.data)
					uni.showModal({
						title: '提示',
						content: '确定支付吗？',
						success: function (res) {
							if (res.confirm) {
								setTimeout(function(){
									that.do_amount_pay(re.data)
								},2000)
							}
							uni.hideLoading()
						},
					})
				}
				
			},
			async do_amount_pay(item){
				var id = item.id
				var that = this
				
				const res = await that.http("post", "/api/order/amount_pay", {
					order_id: id,
					park_price:item.park_price_wait
				})
				
				if(res.code==200){
					uni.showToast({
						title:'操作成功'
					})
					setTimeout(function(){
						that.getOrder()
					},1000)
					that.menu_type=4
					
				}else{
					uni.showModal({
						content:res.message
					})
					setTimeout(function(){
						that.getOrder()
					},1000)
				}
				
				
			},
			async chargingShow_action(item){
				this.item = item
				
				var that = this
				
				const res = await this.http("post", "/api/order/info", {
					id: this.item.id,
				})
				this.val = res.data
				if(this.val.dev_qiang_status!='是'){
					uni.showModal({
						content:'请检查电枪是否插入'
					})
				}else{
					this.chargingShow=true
				}

			}
		}
	}
</script>

<template>
	<view class=" h-full flex flex-col" style="align-items: stretch;">
		<charging @update="update" v-if="chargingShow" :show.sync="chargingShow" :item="item" :type="0"/>

		<div class="mask" v-show="caozuo" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="height: 100vh;overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.caozuo.title}}
					</div>
					<div class="mt-30" v-html="basicData.caozuo.content"></div>
				</div>
				<button class="mt-50" @click="caozuo=false">关闭</button>
			</div>
		</div>


		<image src="/static/icon/scan.png" mode="widthFix" class="scan" style="display: none;"></image>
		<div class="between p-30">
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 1}" @click="menu_type = 1;getOrder(true)">
				已预约</div>
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 2}" @click="menu_type = 2;getOrder(true)">
				充电中</div>
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 3}" @click="menu_type = 3;getOrder(true)">
				待支付</div>
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 4}" @click="menu_type = 4;getOrder(true)">
				待评论</div>
			<div class="text-gray-900 fz36" :class="{'active': menu_type === 5}" @click="menu_type = 5;getOrder(true)">
				已完成</div>
		</div>
		<scroll-view scroll-y="true" class="h-full">

			<Nomore v-if="!orderData||orderData.length==0" />


			<div class="p-30 mb-20" style="padding-top: 0;" v-for="item in orderData">
				<view class="shadow  rounded-20 item">
					<!-- =========================电站========================= -->

					<div class="flex p-20" style="padding-bottom: 10rpx;">
						<div class="w-full">
							<div class="between w-full">
								<div class="flex">
									<image :src="item.station.pic" mode="aspectFill" class="w-50 h-50 rounded-full">
									</image>
									<div class="fz40 ml-20">{{item.station.name}}</div>
								</div>
								<image v-if="item.status==1" @click="caozuo_action()" src="/static/icon/help2.png" mode="widthFix" class="w-45 flex-shirnk-0"></image>
							</div>
							<div class="fz24 text-gray-600 mt-10 mb-10" style="margin-left: 70rpx;">
								{{item.station.address}}
							</div>
						</div>
					</div>

					<!-- =========================车位========================= -->
					<div class="flex-col mb-20" v-if="item.park&&item.type==2">
						<div class="between  overflow-hidden">
							<div class="text-center center text-white fz24 pt-24 pb-24 w-40"
								style="align-self: stretch;background-color: transparent;"
								:class="{'bg-green':item.park.status==1,'bg-yellow':item.park.status==2,'bg-orange':item.park.status==3,'bg-red':item.park.status==4}">
								<!-- 车位{{statusText[item.park.status]}} -->
							</div>


							<div class="rounded-full w-100 h-100 flex-shirnk-0 bg-green center overflow-hidden">
								<image
									:src="item.park.pic" mode="aspectFill"></image>
							</div>
							<div class="info fz24 text-gray-900" style="width: 450rpx;word-break: break-all;">
								<div class="fz28 text-black">{{item.park.name}}</div>
								<div class="between mt-10">
									<div class="">编号:{{item.park.sn}}</div>
								</div>
								<div class="mt-5 mb-5">
									<text decode="decode">营业时间:{{ item.park.start_time }}-{{ item.park.end_time }} <block v-if="item.park.start_time2"> |{{ item.park.start_time2 }}-{{ item.park.end_time2 }} </block><block v-if="item.park.start_time3">|{{ item.park.start_time3 }}-{{ item.park.end_time3 }} </block></text>
								</div>
								<div class="between">
									<div class="">停车费:{{item.park.price}}元/小时</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="pl-20 pr-20" v-if="item.park&&item.type==2">
						<div class="fz36 font-bold">价格信息</div>
						<div class="flex mt-10">
							<div class="fz33 text-gray-600">停车参考价</div>
							<div class="fz33 text-black ml-20">{{item.park.price}}元/时
								<!-- (充电中+15分钟免费） -->
							</div>
						</div>
						<div class="flex mt-10">
							<div class="fz33 text-gray-600">{{item.park.remark}}</div>
						</div>
					
						<block v-if="item.status==1">
							<div class="flex mt-20" style="overflow-x: auto;" v-if="item.park.map_image">
								<image @click="lookat(item.park,index)" v-for="(img, index) in item.park.map_image ? item.park.map_image.split('|') : []" :key="index" :src="img" mode="aspectFill"
																 class="flex-shirnk-0 mr-20 rounded-10" style="width: 288rpx;height: 144rpx"></image>
							</div>
							<div v-else class="mt-20 text-gray-600"> 无导航图</div>
						</block>
						
						<div class="mt-20 mb-20" style="height: 1rpx;width: 100%;background-color: #D8D8D8;"></div>
					
					
					</div>



					<!-- =========================电桩========================= -->

					<div class="flex-col mb-20" v-if="item.device&&item.type==1">
						<div class="between  overflow-hidden">

							<div class="text-center center text-white fz24 pt-24 pb-24 w-40"
								style="align-self: stretch;background-color: transparent;"
								:class="{'bg-green':item.device.status==1,'bg-yellow':item.device.status==2,'bg-orange':item.device.status==3,'bg-red':item.device.status==4}"
								>
								<!-- 电桩{{statusText[item.device.status]}} -->
							</div>


							<div class="rounded-full w-100 h-100 flex-shirnk-0 bg-green center overflow-hidden">
								<image
									:src="item.device.pic"
									class="w-full h-full" mode="aspectFill"></image>
							</div>
							<div class="info fz24 text-gray-900" style="width: 450rpx;word-break: break-all;">
								<div class="fz28 text-black">{{item.device.name}}({{item.device.brand}})</div>
								<div class="between mt-10">
									<div class="">编号:{{item.device.sn}}</div>
									<div class="">功率:{{item.device.rate}}kw</div>
								</div>
								<div class="mt-5 mb-5">
									<text decode="decode">营业时间:{{ item.device.start_time }}-{{ item.device.end_time }} <block v-if="item.device.start_time2"> |{{ item.device.start_time2 }}-{{ item.device.end_time2 }} </block><block v-if="item.device.start_time3">|{{ item.device.start_time3 }}-{{ item.device.end_time3 }} </block></text>
								</div>
								<div class="between">
									<div class="">停车费:{{item.park.price}}元/小时</div>
									<!-- <div class="text-green-2" style="display: none;">可约停车位</div> -->
								</div>
							</div>
							<div class="status  text-white fz28 font-bold mt-15 mr-15 p-5 rounded-15 w-40 h-40 center flex-shirnk-0"
								style="align-self: flex-start;"
								:class="{'bg-orange':item.device.speed=='慢','bg-red':item.device.speed=='快'}">
								{{item.device.speed}}
							</div>
						</div>
					</div>
					
					

					<!-- =========================价格========================= -->
					<div class="pl-20 pr-20" v-if="item.device&&item.type==1">
						<div class="fz36 font-bold" style="position: relative;">
							价格信息
							<image style="position: absolute;left: 90%;top: 72rpx;" @click="wenhao" src="/static/wenhao.png" mode="aspectFill" class="w-40 h-40 rounded-full"></image>
						</div>
						
						<view v-if="wenhao_flag==true" @click="wenhao_flag=false"  class="mask"></view>
						<view v-if="wenhao_flag==true" @click="wenhao_flag=false"  style="position: fixed;z-index: 99; background-color: #fff; font-size: 14px; line-height: 20px; padding: 20px; border-radius: 20px; top: 15%;left: 10%;width: 80%;height: 500px;overflow-y: scroll;">
							<div> <rich-text v-html="item.cost_price1"></rich-text></div>
							<div style="margin-top: 10px;"> <rich-text v-html="item.cost_price2"></rich-text></div>
							<div style="margin-top: 10px;"> <rich-text v-html="item.cost_price3"></rich-text></div>
							<div style="margin-top: 10px;"> <rich-text v-html="item.cost_price4"></rich-text></div>
						</view>
						
						<div class="fz40 font-bold text-red mt-10">
							{{item.device.price}}<text class="text-black fz24">元/度</text>
						</div>
						<div class="flex mt-10">
							<div class="fz33 text-gray-600">{{item.device.remark}}</div>
							<div class="fz33 text-black ml-20" style="display: none;">
								<!-- {{item.park.price}}元/时 -->
								<!-- (充电中+15分钟免费） -->
							</div>
						</div>

						<block v-if="item.status==1">

							<div class="flex mt-20" style="overflow-x: auto;" v-if="item.device.map_image">
								<image @click="lookat(item.device,index)" v-for="(img, index) in item.device.map_image ? item.device.map_image.split('|') : []" :key="index" :src="img" mode="aspectFill"
																 class="flex-shirnk-0 mr-20 rounded-10" style="width: 288rpx;height: 144rpx"></image>
							</div>
							<div v-else class="mt-20 text-gray-600"> 无导航图</div>
						
						</block>
						
						<div class="mt-20 mb-20"  style="height: 1rpx;width: 100%;background-color: #D8D8D8;"></div>


					</div>


					<!-- =========================信息========================= -->
					<div class="p-30"  v-if="item.status==4||item.status==5||item.status==6">
						
						<lookvue :val="item" :menu_type="menu_type"></lookvue>
						
					</div>


					<!-- =========================操作========================= -->

					<div class="mt-20 mb-20" v-if="item.status==4||item.status==5||item.status==6" style="height: 1rpx;width: 100%;background-color: #D8D8D8;"></div>

					<div class="center font-bold" v-if="menu_type==1&&item.status==1" @click="openLocation(item)">
						<image src="/static/icon/go.png" mode="widthFix" class="w-40"></image>
						<div class="fz36 text-blue ml-10" >导航前往</div>
					</div>
					
					<div class="center font-bold" v-if="menu_type==1&&item.status==2&&item.type==2" @click="pay(item)">
						<image src="/static/icon/go.png" mode="widthFix" class="w-40"></image>
						<div class="fz36 text-blue ml-10" >车辆驶离</div>
					</div>
					
					<div class="center font-bold" v-if="menu_type==1&&item.status==2&&item.type==1" @click="charging(item)">
						<image src="/static/icon/charging.png" mode="widthFix" class="w-40"></image>
						<div class="fz36 text-green ml-10" style="color: #00B578;">确认充电</div>
					</div>

					<template v-if="menu_type==1">


						<div class="text-red center mt-20 fz40" v-if="menu_type==1&&item.status==1">
							<daojishi :timestamp="item.daojishi" :fontSize="40" :color="'#FF0000'"></daojishi> 
						</div>
						
						<div class="center text-gray-300" v-if="item.status==2">
							进场时间：{{item.start_time}}
						</div>
						<div class="center text-gray-300" style="margin-top: 10px;font-size: 28rpx;">
							预约时间：{{item.create_at}}
						</div>
						
						<div class="h-20"></div>

					</template>


					<template v-if="menu_type==2">

						<div class="text-red center mt-20 fz40">
							<div class="fz36 font-bold text-blue ml-10" @click="chargingShow_action(item)">
								<lookatvue :item="item"></lookatvue>
							</div>
						</div>
						<div class="h-20"></div>

					</template>

					<template v-if="menu_type==5">
						<div class="center">
							<div class="fz36 font-bold text-blue ml-10" @click="getEvaluateInfo(item)">查看评论</div>
						</div>
						<div class="h-20"></div>
					</template>

					<template v-if="menu_type==3">
						<div class="center" @click="amount_pay(item)">
							<image src="/static/icon/pay.png" mode="widthFix" class="w-40"></image>
							<div class="fz36 font-bold text-blue ml-10">余额支付</div>
						</div>
						<div class="h-20"></div>
					</template>
					<template v-if="menu_type==4">
						<div class="center" v-if="menu_type==4"
							@click="go('/pages/order/comment?item='+JSON.stringify(item))">
							<image src="/static/icon/comment.png" mode="widthFix" class="w-40"></image>
							<div class="fz36 font-bold text-blue ml-10">评论</div>
						</div>
						<div class="h-20"></div>
					</template>



				</view>

			</div>


		</scroll-view>
		
		
	</view>
</template>


<style>
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	.scan {
		position: fixed;
		z-index: 99;
		width: 160rpx;
		bottom: 5%;
		right: 1%;
	}

	.item {
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3) !important;
	}

	.active {
		color: #3662EC;
		font-weight: bold;
	}

	page {
		height: 100%;
	}
</style>